<script setup lang="ts">
import * as THREE from 'three'
import { ref, onMounted } from 'vue'

const domEl = ref(null)

const greenBox = () => {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera( 75, domEl.value.clientWidth / domEl.value.clientHeight, 0.1, 1000 )

  const renderer = new THREE.WebGLRenderer()
  renderer.setSize( domEl.value.clientWidth, domEl.value.clientHeight )
  domEl.value.appendChild( renderer.domElement )

  const geometry = new THREE.BoxGeometry( 1, 1, 1 )
  // const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } )
  const material = new THREE.MeshPhongMaterial({color: 0x44aa88})
  const cube = new THREE.Mesh( geometry, material )
  scene.add( cube )

  // 灯光
  const color = 0xFFFFFF
  const intensity = 3
  const light = new THREE.DirectionalLight(color, intensity)
  light.position.set(-1, 2, 4)
  scene.add(light)

  camera.position.z = 5

  function animate() {
    requestAnimationFrame( animate )
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    renderer.render( scene, camera )
  }
  animate()

  window.addEventListener( 'resize', onWindowResize )
  function onWindowResize() {
    camera.aspect = domEl.value.clientWidth / domEl.value.clientHeight
    camera.updateProjectionMatrix()
    renderer.setSize( domEl.value.clientWidth, domEl.value.clientHeight )
  }
}

onMounted(() => {
  greenBox()
})
</script>

<template>
  <div ref="domEl" class="domEl-class"></div>
</template>

<style scoped lang="scss">
.domEl-class {
  width: 100vw;
  height: 100vh;
}
</style>